<template>
  <div>
      <bread></bread>
    <el-card>
      <el-row :gutter="20">
        <!-- 表头功能 -->
        <el-form ref="form" label-width="80px" class="forms">
          <el-form-item>
            <el-input
              placeholder="商品名称"
              v-model="resetDatat.name"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              placeholder="商品编号"
              v-model="resetDatat.code"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              placeholder="选择供应商"
              v-model="resetDatat.supplierName"
            ></el-input>
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item>
            <el-button type="primary" @click="searchForm">查询</el-button>
            <el-button type="primary" @click="addFormData">新增</el-button>
            <el-button @click="resetData">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <!-- 数据渲染部分 -->
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        style="width: 100%"
      >
        <el-table-column prop="id" label="序号" width></el-table-column>
        <el-table-column prop="name" label="商品名称" width></el-table-column>
        <el-table-column prop="code" label="商品编码"></el-table-column>
        <el-table-column prop="spec" label="商品规格"></el-table-column>
        <el-table-column prop="retailPrice" label="零售价"></el-table-column>
        <el-table-column prop="purchasePrice" label="进货价"></el-table-column>
        <el-table-column prop="storageNum" label="库存数量"></el-table-column>
        <el-table-column prop="supplierName" label="供应商"></el-table-column>
        <el-table-column label="操作">
          <!-- 操作 -->
          <template slot-scope="scope">
            <!-- 编辑区域、 -->
            <el-button size="mini" type="primary" @click="editForm(scope.row)"
              >编辑</el-button
            >
            <!-- 删除 -->
            <el-button size="mini" type="danger" @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      ></el-pagination>
      <!-- 编辑用户的操作 -->
      <el-dialog title="编辑商品" :visible.sync="dialogVisible" width="50%">
        <span>
          <el-form
            :model="ruleFormList"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
          >
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="ruleFormList.name"></el-input>
            </el-form-item>
            <el-form-item label="商品编号" prop="code">
              <el-input v-model="ruleFormList.code"></el-input>
            </el-form-item>
            <el-form-item label="商品规格" prop="spec">
              <el-input v-model="ruleFormList.spec"></el-input>
            </el-form-item>
            <el-form-item label="零售价" prop="purchasePrice">
              <el-input v-model="ruleFormList.purchasePrice"></el-input>
            </el-form-item>
            <el-form-item label="进货价" prop="retailPrice">
              <el-input v-model="ruleFormList.retailPrice"></el-input>
            </el-form-item>
            <el-form-item label="库存数量" prop="storageNum">
              <el-input v-model="ruleFormList.storageNum"></el-input>
            </el-form-item>
            <el-form-item label="供应商" prop="supplierName">
              <el-input
                v-model="ruleFormList.supplierName"
                @click.native="supper"
              ></el-input>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editAdd">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 新增数据 -->
      <el-dialog title="提示" :visible.sync="addDialogVisible" width="30%">
        <span>
          <el-form
            :model="ruleFormList"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
          >
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="ruleFormList.name"></el-input>
            </el-form-item>
            <el-form-item label="商品编号" prop="code">
              <el-input v-model="ruleFormList.code"></el-input>
            </el-form-item>
            <el-form-item label="商品规格" prop="spec">
              <el-input v-model="ruleFormList.spec"></el-input>
            </el-form-item>
            <el-form-item label="零售价" prop="purchasePrice">
              <el-input v-model="ruleFormList.purchasePrice"></el-input>
            </el-form-item>
            <el-form-item label="进货价" prop="retailPrice">
              <el-input v-model="ruleFormList.retailPrice"></el-input>
            </el-form-item>
            <el-form-item label="库存数量" prop="storageNum">
              <el-input v-model="ruleFormList.storageNum"></el-input>
            </el-form-item>
            <el-form-item label="供应商" prop="supplierName">
              <el-input
                v-model="ruleFormList.supplierName"
                @click.native="supper"
              ></el-input>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addDialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 供应商弹框 -->

      <el-dialog title="提示" :visible.sync="suppDialogVisible" width="64%">
        <div class="fle">
          <el-input placeholder="请输入内容"></el-input>
          <el-button type="primary" @click="searchForm">查询</el-button>
        </div>

        <el-table :data="supperData" style="width: 100%">
          <el-table-column prop="id" label="序号" width="180"></el-table-column>
          <el-table-column
            prop="name"
            label="供应商名称"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="code"
            label="姓名"
            width="180"
          ></el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="suppDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="suppDialogVisible = false"
            >确 定</el-button
          >
        </span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        ></el-pagination>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import goodsApi from "../api/goods";
import bread from "../components/bread";
export default {
  components: {
    bread,
  },
  data() {
    return {
      supperData: [],
      // 所有数据
      addDialogVisible: false,
      tableData: [],
      dialogVisible: false,
      ruleFormList: {},
      resetDatat: {
        name: "",
        code: "",
        supplierName: "",
      },
      pagesize: 5,
      currentPage: 1,
      suppDialogVisible: false,

      rules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 2, max: 10, message: "请输入2到10位字符", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入编码", trigger: "blur" },
          { min: 2, max: 10, message: "请输入2到10位字符", trigger: "blur" },
        ],
        purchasePrice: [
          { required: true, message: "请输入零售价", trigger: "blur" },
          { min: 2, max: 10, message: "请输入2到10位字符", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    // 调用
    this.getList();
  },
  created() {},
  methods: {
    // 获取列表数据
    async getList() {
      const { data: res } = await goodsApi.goodsList();
      console.log(res);
      console.log(res.data.rows);
      this.tableData = res.data.rows;
      this.supperData = res.data.rows;

      // if (res.code == 2000) {
      //   this.$message.success("添加成功");

      // } else {
      //   this.$message.error("添加失败");
      // }
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 删除
    async del(scope) {
      const result = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*
    	$confirm方法返回的是一个Promise对象，可以通过async/await的方式结束返回值；
    	如果返回值的结果是cancel证明点击的是取消按钮；
    	如果返回值的结果是confirm证明点击的是确定按钮
      */
      if (result === "cancel") {
        // 证明咱们现在点击的是取消按钮
        return;
      } else if (result === "confirm") {
        // 证明点击的是确定按钮
        const res = await goodsApi.dele(scope);
        console.log(res);

        // const { meta } = res.data;
        if (res.data.code !== 2000) {
          this.$message.error("用户删除失败");
        } else {
          this.$message.success("用户删除成功");
          // 重新向服务器发起请求，获取最新用户列表数据
          this.getList();
        }
      }
    },
    // 编辑
    async editForm(scope) {
      this.dialogVisible = true;
      this.ruleFormList = scope;
    },
    async editAdd() {
      const { data: res } = await goodsApi.editForm(this.ruleFormList);
      console.log(res);
      if (res.code !== 2000) {
        this.$message.error("编辑用户失败");
      }
      this.$message.success("编辑用户成功");
      this.ruleFormList = {};
      this.dialogVisible = false;
      this.getList();
    },
    // 新增
    addFormData() {
      this.addDialogVisible = true;
    },
    // 查询
    async searchForm() {
      const { data: res } = await goodsApi.searchForm();
      console.log(res);
      if (res.code !== 2000) {
        this.$message.error("查询失败");
      }
      this.$message.success("查询成功");
      this.getList();
    },
    // 重置
    resetData() {
      this.resetDatat.name = "";
      this.resetDatat.code = "";
      this.resetDatat.supplierName = "";
    },
    supper() {
      this.suppDialogVisible = true;
    },
  },
  // 点击供应商
};
</script>
<style lang="scss">
.el-container {
  height: 100%;
}
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #373d41;
  font-size: 22px;
  color: #fff;
  height: 100%;
  .logo-wrap {
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
    }
  }
}
.el-aside {
  background-color: #333744;
  height: 560px;
  .toggle-menu {
    line-height: 24px;
    background-color: #4a5064;
    font-size: 12px;
    text-align: center;
    color: #fff;
    letter-spacing: 0.02em;
    cursor: pointer;
  }
}

.el-main {
  background-color: #eaedf1;
}
html,
body {
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
.topHead {
  width: 100%;
  background-color: rgb(241, 239, 239);
  height: 50px;
  // text-align: center;
  line-height: 50px;
  box-shadow: 10;
  font-size: 10px;
  border-radius: 15px;
  span {
    color: green;
    font-size: 30px;
  }
}
.el-input__inner {
  width: 200px;
}
.forms {
  display: flex;
}
.el-card__body {
  // padding: 0;
  padding-left: 20px;
}
.fle {
  display: flex;
}
</style>
